<template>
	<view class="messagePage myBackground">
		<!-- <u-navbar title="个人中心"@rightClick="rightClick":autoBack="true"></u-navbar> -->
		<view class="content">
			<view class="mb15">
				<u-tabs :list="tabList" :current="current" lineColor="#3276FF" lineWidth="25" :activeStyle="{color: '#ffffff'}"
					:inactiveStyle="{color: '#ffffff'}" @change="tabsChange"></u-tabs>
			</view>
			<swiper class="swiper-box" :current="swiperCurrent" @change="transition">
				<swiper-item class="swiper-item">
					<scroll-view scroll-y class="h100p w100p">
						<ptControl ref="myChildComponentOne"></ptControl>
						<view style="height: 2rpx;"></view>
					</scroll-view>
				</swiper-item>
				<swiper-item class="swiper-item">
					<scroll-view scroll-y class="h100p w100p">
						<znControl ref="myChildComponentTwo"></znControl>
						<view style="height: 2rpx;"></view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
		<!-- <tab-bar-view :tabCode="'1'"></tab-bar-view> -->
	</view>
</template>

<script>
	import ptControl from "@/components/noonBreak/ptControl.vue"
	import znControl from "@/components/noonBreak/znControl.vue"
	
	export default {
		components: {
			ptControl,
			znControl
		},
		data() {
			return {
				activeMenu: "",
				swiperCurrent: 0,
				current: 0,
				tabList: [{
					name: '午休区总控'
				}, {
					name: '智能控制',
				}],
			};
		},
		onLoad(query) {
			this.activeMenu = query.activeMenu
		},
		onShow() {
			
		},
		onReady() {
			// 隐藏导航栏
			uni.hideTabBar({});
		},
		onUnload() {
			this.$refs.myChildComponentOne.clearTimer();
			this.$refs.myChildComponentTwo.clearTimer();
		},
		methods: {
			// tabs通知swiper切换
			tabsChange(e) {
				this.current = e.index;
				this.swiperCurrent = e.index;
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				this.current = e.detail.current
				this.swiperCurrent = e.detail.current
			},

			goPage(url) {
				uni.navigateTo({
					url
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	page {
		background-color: #f5f5f5;
	}

	.messagePage {
		height: calc(100vh - var(--window-top));
		width: 100%;

		.content {
			display: flex;
			flex-direction: column;
			height: calc(100% - 20rpx);
			font-family: Source Han Sans CN, Source Han Sans CN-400;

			::v-deep .u-tabs__wrapper__nav[data-v-48634e29] {
				display: flex;
				flex-direction: row;
				position: relative;
				justify-content: space-between;
			}

			//选中蓝色滑块对应
			::v-deep .u-tabs__wrapper__nav__item {
				flex: 1 1 0% !important;
			}

			.swiper-box {
				flex: 1;
			}

			.swiper-item {
				height: 100%;
			}
		}
	}
</style>